<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <!-- title -->
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>芯片管理</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <div class="normal-box-bd">
        <div class="clearfix mb-20">
          <Button
            custom-icon="iconfont icon-fangkuai2"
            type="primary"
            size="small"
            style="float: right"
            @click="bandCard"
            >芯片绑定</Button
          >

          <Input
            class="mr-10"
            v-model="queryData.userId"
            placeholder="卡号"
            :clearable=true
            style="width: 200px"
          />
          <Col span="4" class="mr-10">
            <sele @ProvinceData="childByValue"></sele>
          </Col>
          <Button
            type="primary"
            custom-icon="iconfont icon-chaxun"
            size="small"
            @click="getList"
            >查找</Button
          >
        </div>
      </div>

      <div>
        <i-table
          stripe
          highlight-row
          border
          :content="self"
          :columns="Tcolumns"
          :data="dataList"
        ></i-table>
      </div>
      <div class="page">
        <Page
          :total="queryData.totalRecord"
          :page-size="queryData.limit"
          :current="queryData.page"
          show-total
          show-elevator
          @on-change="changepage"
        ></Page>
      </div>

      <!--新建/修改用户-->
        <Modal v-model="bindWin.show" title="芯片绑定" @on-ok="dataOk">
          <Form ref="check" :model="bindWin.data" :label-width="80" :rules="bindWin.rules">
            <FormItem label="村口卡号 " prop="userid">
              <Input placeholder="请输入" v-model="bindWin.data.userid" style="width:300px;"/>
            </FormItem>
            <FormItem label="芯片号" prop="citizencardid">
              <Input placeholder="请输入" v-model="bindWin.data.citizencardid" style="width:300px;"/>
            </FormItem>
            <FormItem label="选择类型" prop="ask">
                <Select v-model="bindWin.data.ask" style="width:200px">
                    <Option v-for="item in option" :value="item.ask" :key="item.ask">{{ item.name }}</Option>
                </Select>
            </FormItem>

          </Form>
        </Modal>
    </div>
  </div>
</template>

<script>
import Request from "@/api/request.js";
// import moment from "moment";
import { Message } from "iview";
import sele from "@/view/test/city.vue";
export default {
  components: {
    sele,
  },
  data() {
    return {
      dataList: [],
      keyWords: "", // 搜索关键字
      bindWin: {
          show: false,
          title: '',
          data: {
            userid: '',
            citizencardid: '',
            ask: ''
          },
          rules: {
              userid: [{ required: true, message: "请填写村口卡号", trigger: "blur" }],
              citizencardid: [{ required: true, message: "请填写芯片号", trigger: "blur" }],
              ask: [{ required: true, message: "请选择类型", trigger: "blur" }],
          },

      },
      option: [
            { ask: '1', name: '桶绑定（厨余）' },
            { ask: '3', name: '桶绑定（其他）' },
            { ask: '4', name: '市民卡' },
            { ask: '8', name: '村口芯片' },
        ],

      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        userId: "",
      },

      // 表格配置
      self: this,
      Tcolumns: [
        { align: "center", title: "村口卡号", key: "userid" },
        { align: "center", title: "芯片号", key: "citizencardid" },
        {
            align:"center",
            title: "绑定类型",
            render: (create, params)=> {
                let type = Number(params.row.ask)
                let text
                switch(type) {
                    case 1: text = '桶绑定（厨余）';break;
                    case 3: text = '桶绑定（其他）';break;
                    case 4: text = '市民卡';break;
                    case 8: text = '村口芯片';break;
                    default: text = '未知类型'
                }
                return create('div',{},text)
            }
        },
        { align: "center", title: "绑定时间", key: "bundtime"},
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (create, params) => {
            // 创建父节点
              return create("i-button",
                {
                  props: { type: "error", size: "small" },
                  style: { margin: "0 3px" },
                  on: {click: () => {this.unBind(params.index)}}
                },"解绑")
          },
        },
      ],
    };
  },
  mounted() {
    let area = window.defArea;
    console.log(99, window.defArea);
    this.queryData.provid = area[0];
    this.queryData.cityid = area[1];
    this.queryData.distid = area[2];
    this.getList();
  },
  methods: {
    // 获取用户列表
    async getList() {
      console.log(this.queryData);
      let data = (await Request("get", this.queryData, "citizencard/page"))
        .data;
      this.queryData.totalRecord = data.totalRecord;
      this.dataList = data.list;
      console.log(123, this.dataList);
    },

    // 分页切换
    changepage(index) {
      this.queryData.page = index;
      this.getList();
    },

    // 查询清空
    clearQuery() {
      this.queryData.userId = "";
      this.queryData.name = "";
      this.queryData.phone = "";
    },

    // 提交绑定数据
    dataOk() {
        console.log(this.bindWin.data);
        this.$refs["check"].validate(async valid => {
        // console.log(valid);
        if(!valid) {
          this.changeLoading()
        }
        if(valid) {
          this.bindWin.data.userid = String(this.bindWin.data.userid)
          this.bindWin.data.citizencardid = String(this.bindWin.data.citizencardid)
          let result = await Request('post',this.bindWin.data,'citizencard/')
          if(result.code==0) {
            this.$Message.success("操作成功")
            this.clearData()
            this.getList()
            this.bindWin.show = false
            return
          }
          this.$Message.error("操作失败")
        }

      })
    },
    // 改变load状态
    changeLoading() {
      this.bindWin.show = false;
      this.$nextTick(() => {
        this.bindWin.show = true;
      });
    },
    // 绑定芯片弹窗
    bandCard() {this.bindWin.show = true},

    // 解绑
    unBind(index) {
      let data = this.dataList[index]
      let id = data.userid;
      let cid = String(data.citizencardid);
      this.$Modal.confirm({
        title: "删除确认",
        content:
          "<p>你确认将卡号为 <strong>" + id + "</strong> 的卡片解绑吗？</p>",
        loading: true,
        onOk: async () => {
          let result = await Request("delete",'',`citizencard?id=${cid}`);
          if (result.code==0) {
            this.$Message.success("操作成功");
            this.getList();
            this.$Modal.remove();
            return;
          }
          this.$Message.error("操作失败" + e);
          this.$Modal.remove();
        },
      });
    },

    // 数据清空
    clearData() {
        this.bindWin.data.userid = ''
        this.bindWin.data.citizencardid = ''
        this.bindWin.data.ask = ''
    },

    // 六级联动数据获取
    childByValue(data) {
      let area = this.queryData;
      area.provid = data.provid || "";
      area.cityid = data.cityid || "";
      area.distid = data.distid || "";
      area.strtid = data.strtid || "";
      area.commid = data.commid || "";
      area.comminid = data.comminid || "";
      console.log(area);
    },
  },
};
</script>

<style>
td[class="y ivu-table-column-center"] {
  background: #02d792 !important;
  color: #fff;
}
td[class="n ivu-table-column-center"] {
  background: #f00 !important;
  color: #fff;
}
.page {
  padding: 1em 0.5em;
}
</style>
